
import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import './link.css';
import axios from 'axios';

const title = 'BlogSet for nobody';

function Url(props) {

  return (
    /* <a href={props.url} target="_blank" rel="noopener noreferrer">{props.name}</a> */
    <div className="linka" onClick={() => { window.open(props.url) }}> {props.name}-------  {props.url}</div>

  );
}

class BlogSet extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      BlogSet: [],
    };
  }
  renderUrl(name, url) {
    return <Url
      name={name}
      url={url}
    />;
  }
  // 返回数组
  renderUrlSet() {

    // var BlogSet = [{"blogapp_name":"小红","blogapp_url":"www.baidu.com"}
    // ,{"blogapp_name":"小红","blogapp_url":"www.baidu.com"}
    // ,{"blogapp_name":"小红","blogapp_url":"www.baidu.com"}];
    var url = 'http://localhost:4396/getblogurl';
    axios.get(url)
      .then(function (response) {
        console.log(response.data);
        this
          .setState(
            { BlogSet: response.data }
          );

      }).catch(error => {
        console.log(error)
      })
    var BlogSet = this.state.BlogSet
    const urlSet = [];
    alert(typeof BlogSet);
    console.log(typeof BlogSet)
    for (var i in BlogSet) {
      alert(i)
      // alert(i)
      urlSet.push(this.renderUrl(BlogSet[i].blogapp_name, BlogSet[i].blogapp_url))

    }
    return (
      <div>{urlSet}</div>
    )
  }
  render() {
    return (
      <div>
        {this.renderUrlSet()}
      </div>
    );
  }
}
class BlogInput extends React.Component {
  constructor() {
    super();
    this.name = React.createRef()
    this.url = React.createRef()
  }


  handleClick() {
    var data = { "name": this.name.current.value, "url": this.url.current.value }
    //  alert(this.name.current.value)
    //  alert(this.url.current.value)
    console.log(data);
    var url = 'http://localhost:4396/addblogurl'
    alert('上传中');
    axios.post(url, data);
    alert('上传成功');
    // this.flag = !this.flag;
  }
  rendertext() {
    return (
      <div>
        <div style={{ textAlign: 'center' }}> <input defaultValue="name" ref={this.name}></input></div>
        <div style={{ textAlign: 'center' }}>
          <input defaultValue="url" ref={this.url}></input></div>
        <div style={{ textAlign: 'center' }} > <button onClick={this.handleClick.bind(this)}>上传地址</button>
        </div>
      </div>
    )
  }
  render() {
    return (
      <div >
        {this.rendertext()}
      </div>
    );
  }
}

class BLOGSET extends React.Component {
  render() {
    return (
      <div className="blog">
        <h1 className="text-clip">{title}</h1>
        <div>
          <BlogSet />
        </div>
        <div>
          <BlogInput />
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <BLOGSET />,
  document.getElementById('root')
);
